<template >
   <div style="padding:30px;box-sizing: border-box;" >
      <div>
        <searchForm :formData="formData"></searchForm>
      </div>
      <div >
        <el-button type="primary" @click="open">新增</el-button>
        <el-button type="warning">修改</el-button>
        <el-button type="danger">删除</el-button>
      </div>
      <div>
        <commonTable :tableData="noticeList" :columnData="columnsData" :total="total"
          @sendPage="getList"
        >
          <template #noticeType="{row}">
               <el-tag type="success" v-if="row.noticeType === '2'">公告</el-tag>
               <el-tag type="warning"
               v-if="row.noticeType ==='1'">通知</el-tag>
          </template>
          <template #status="{row}">
               <el-tag type="success" v-if="row.status === '0'">正常</el-tag>
               <el-tag type="warning"
               v-if="row.status ==='1'">停用</el-tag>
          </template>
          <template #action="{row}">
             <el-link type="primary" @click="toEdit(row.noticeId)">修改</el-link>
             <el-link type="primary" @click="toDel(row.noticeId)">删除</el-link>
          </template>
        </commonTable> 
      </div>
      <div>
        <el-dialog title="添加公告" v-model="noticeFlag" width="60%">
         <el-form ref="noticeFormRef" :model="formObj" :rules="rules">
          <el-row>
             <el-col :span="12">
              <el-form-item prop="noticeTitle" label="公告标题">
                <el-input v-model="formObj.noticeTitle"></el-input>
              </el-form-item>
             </el-col>
             <el-col  :span="12">
              <el-form-item prop="noticeType" label="公告类型">
                <el-select v-model="formObj.noticeType">
                 <el-option label="公告" value="2"></el-option>
                 <el-option label="通知" value="1"></el-option>
                </el-select>
              </el-form-item>
             </el-col>
             <el-col :span="24">
              <el-form-item prop="status" label="状态">
               <el-radio-group v-model="formObj.status">
                <el-radio label="正常" value="0"></el-radio>
                <el-radio label="关闭" value="1"></el-radio>
               </el-radio-group>
              </el-form-item>
             </el-col>
             <el-col :span="24">
              <el-form-item prop="noticeContent" label="内容">
                <!-- -******************************** -->
                <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
      />
      <Editor
        style="height: 300px; overflow-y: hidden;"
        v-model="formObj.noticeContent"
        :defaultConfig="editorConfig"
        @onCreated="handleCreated"
      />
      <input type="file" id="myexcel" @change="getFile">
    </div>

                <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->
              </el-form-item>
             </el-col>
          </el-row>
         </el-form>
         <template #footer>
          <el-button @click="toSave" type="primary">确定</el-button>
          <el-button @click="noticeFlag=false">取消</el-button>
         </template>
        </el-dialog>
      </div>
   </div>
 </template>
 <script setup>
   import {addNotice,getNotice,updateNotice,delNotice} from '@/api/system/notice'
   import noticeHook from './child/noticeHook'
   import {shallowRef,ref,onBeforeUnmount,onMounted,reactive} from 'vue'
   import {Boot} from '@wangeditor/editor'
   import {getToken} from '@/utils/auth'
   import '@wangeditor/editor/dist/css/style.css' // 引入 css
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import * as XLSX from 'xlsx';
    
   let {formData,columnsData,getList,noticeList,total}= noticeHook()
   
   getList();
       // 注册一个菜单第一步
let nowFile=ref('')
let tableStr=ref('')
   let getFile=(e)=>{
 console.log("fffffffffffffffff")
 let file=e.target.files[0];
  nowFile.value=e.target.files[0];






  
  const reader = new FileReader();

  reader.onload = function(event) {
        const data = event.target.result;
        // 解析Excel数据
        const workbook = XLSX.read(data, { type: 'binary' });
        console.log(workbook,"aaaaaaaaaaaa")
        // 获取第一个工作表名
        const firstSheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[firstSheetName];
        
        // 将工作表转换为JSON
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        
        // 现在jsonData就是一个二维数组，每一行是一个数组，每个数组的元素是单元格的值
        console.log(jsonData,"============");

        let trstr=''
          jsonData.forEach(item=>{
            if(item.length!=0){
                trstr+= ` <tr>.
                      <td >${item[0]}<td>
                      <td >${item[1]}<td>
                       <td >${item[2]}<td>
                       <td >${item[3]}<td>
                       <td >${item[4]}<td>
                <tr>`
            }
          })
        tableStr.value+=`<table border="1">
                ${trstr}
          
            <table border="1">`
            ;
            console.log(tableStr.value,'_-----')

            formObj.noticeContent+=tableStr.value

    };
    reader.readAsArrayBuffer(file);


}
   let noticeFlag=ref(false)
   let open=()=>{
    noticeFlag.value=true;

// 选择的excel


class MyExcel  {
  // TS 语法
  // class MyButtonMenu {                       // JS 语法

  constructor() {
    this.title = '选择excel' // 自定义菜单标题
    // this.iconSvg = '<svg>...</svg>' // 可选
    this.tag = 'button'
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor){
    // TS 语法
    // getValue(editor) {                              // JS 语法
    // nowFile.value ----文件数据包转为json数据
  
    return   tableStr.value
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    // TS 语法
    // isActive(editor) {                    // JS 语法
    return false
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    // TS 语法
    // isDisabled(editor) {                     // JS 语法
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // TS 语法
    // exec(editor, value) {                              // JS 语法
    // 打开一个文件选择框 
    document.getElementById("myexcel").click()//打开文件选择框

    if (this.isDisabled(editor)) return
    editor.insertText(value) // value 即 this.value(editor) 的返回值
  }
}

const menu1Conf = {
  key: 'excel', // 定义 menu key ：要保证唯一、不重复（重要）
  factory() {
    return new MyExcel() // 把 `YourMenuClass` 替换为你菜单的 class
  },
}

    // 注册菜单
    Boot.registerMenu(menu1Conf)

    // 将注册的菜单 通过key 添加到工具栏
    toolbarConfig.insertKeys = {
      index: 20, // 插入的位置，基于当前的 toolbarKeys
      keys: ['excel'],
    }
   }
   let formObj=reactive({
    noticeType:'',
    status:'',
    noticeTitle:'',
    noticeContent:''
   })
   let rules={
    noticeType:[{required:true,message:'请选择公告类型',trigger:'blur'}],
    status:[{required:true,message:'请选择公告状态',trigger:'blur'}],
    noticeTitle:[{required:true,message:'请输入公告标题',trigger:'blur'}],
    noticeContent:[{required:true,message:'请输入公告内容',trigger:'blur'}]
   }

//  获取详情 ---回显
let toEdit= async (id)=>{
  let res=await getNotice(id) //获取公告详情
  console.log(res,"回显")
  formObj.noticeTitle=res.data.noticeTitle
  formObj.noticeType=res.data.noticeType
  formObj.status=res.data.status
  formObj.noticeContent=res.data.noticeContent
  formObj.noticeId=res.data.noticeId
  noticeFlag.value=true
}


    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {

})
let noticeFormRef=ref(null)
let toSave= ()=>{
  noticeFormRef.value.validate(async (vali)=>{
    if(vali){
      if(formObj.noticeId){
        let editRes=await updateNotice(formObj)
        console.log(editRes,"修改成功")
      }else{
        let res=await addNotice(formObj)
        console.log(res,"添加成功")
      }
    }
    noticeFlag.value=false
      noticeFormRef.value.resetFields()
      getList()
  })
}

// 删除接口
let toDel=async (id)=>{
  let res=await delNotice(id)
  console.log(res,"删除成功")
  getList()
}
const toolbarConfig = {}
// 给富文本对接上传图片功能
// 给富文本增加一个新按钮
// 添加新功能
// 选择execl功能 数据显示到富文本中
const editorConfig = {
   placeholder: '请输入内容...' ,
   MENU_CONF:{ //图片上传路径
    uploadImage:{
      headers:{
        "Authorization":'Bearer ' + getToken()
      },
      fieldName:"avatarfile",
      server:"http://8.137.35.74:8080/system/user/profile/avatar",
      onSuccess(file,res){
        console.log(file,res,"0000000000000")
      }
    }
   }

}




// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy() //富文本自带的销毁方法
})
// 初始化 实例
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！


 


}



 </script>